@extends('welcome.app')

@section('body')
    <div class="mdui-container-fluid">
        <div class="mdui-toolbar">
            <span class="mdui-typo-title">piilvi</span>
            <div class="mdui-toolbar-spacer"></div>
            <div class="mdui-col-xs-6">
                <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
                    <button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i
                                class="mdui-icon material-icons">search</i>
                    </button>
                    <input class="mdui-textfield-input" type="text" placeholder="Search"/>
                    <button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i
                                class="mdui-icon material-icons">close</i>
                    </button>
                </div>
            </div>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
            <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
        </div>
    </div>
    <div class="mdui-valign">
        <div class="mdui-card" id="login-card">

            <!-- 卡片的标题和副标题 -->
            <div class="mdui-card-primary mdui-text-center">
                <div class="mdui-card-primary-title title m-b-md">piilvi</div>
                <div class="mdui-card-primary-subtitle">让创作充满收获</div>
            </div>

            <!-- 卡片的内容 -->
            <div class="mdui-card-content mdui-container">
                <form method="POST" action="{{ route('login') }}">
                    @csrf

                    <div class="mdui-col">
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">email</i>
                            <label class="mdui-textfield-label">邮箱{{ __('E-Mail Address') }}</label>
                            <input class="mdui-textfield-input" type="email" value="{{ old('email') }}" name="email"
                                   required/>
                            @if ($errors->has('email'))
                                <div class="mdui-textfield-helper mdui-text-right mdui-text-color-pink-accent">{{ $errors->first('email') }}</div>
                            @endif
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">lock</i>
                            <label class="mdui-textfield-label">密码{{ __('Password') }}</label>
                            <input class="mdui-textfield-input" type="password"
                                   pattern="^.*(?=.{6,})(?=.*[a-z])(?=.*[A-Z]).*$" name="password" required/>
                            @if ($errors->has('password'))
                                <div class="mdui-textfield-helper mdui-text-right mdui-text-color-pink-accent">{{ $errors->first('password') }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="mdui-col">
                        <button id="register" class="mdui-btn mdui-btn-block mdui-color-pink-accent mdui-ripple">
                            登录{{ __('Login') }}
                        </button>
                    </div>
                </form>
            </div>

            <!-- 卡片的按钮 -->
            <div class="mdui-card-actions">
                <div class="mdui-container mdui-text-right">
                    <div class="mdui-panel" mdui-panel>
                        <div class="mdui-panel-item">
                            <div class="mdui-panel-item-header">
                                <div class="mdui-panel-item-title"><i class="mdui-icon material-icons">&#xe7ef;</i>
                                </div>
                                <div class="mdui-panel-item-summary">用其他账号开始</div>
                                <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
                            </div>
                            <div class="mdui-panel-item-body">
                                <p>null</p>
                                <div class="mdui-panel-item-actions">
                                    <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="mdui-bottom-nav mdui-bottom-nav-scroll-hide mdui-color-brown">
        <a href="javascript:;" class="mdui-ripple">关于piilvi</a>
        <a href="javascript:;" class="mdui-ripple">
            <img class="mdui-img-circle" src="http://pixivlaravel5.com/favicon.ico">
        </a>
        <a href="javascript:;" class="mdui-ripple mdui-text-left">
            看见鹿晗沙发<br>
            xxx的作品
        </a>
    </div>
@endsection
